<!--
  描述：拖放地图组件，默认尺寸是 500 * 300

  接收属性参数：
    lat: 纬度
    lng: 经度

  自定义事件：
    drag: 拖放完成事件

  示例：
    <mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>
-->
<template>
  <div class="m-map">
    <div id="js-container" class="map">正在加载数据 ...
      <a class="width100P height100P" style="text-decoration: none;position: absolute;z-index: 9" target="_blank"
         href="https://uri.amap.com/marker?position=114.06527,22.643931&name=蓝湖科技（深圳）有限公司"></a>
    </div>
  </div>
</template>

<script>
import remoteLoad from '@/utils/remoteLoad.js'
import { MapKey, MapCityName } from '@/config/config'
export default {
  props: ['lat', 'lng'],
  data () {
    return {
      AMap: null,
      marker: null,
    }
  },
  watch: {

  },
  methods: {

    // 实例化地图
    initMap () {
      let AMap = this.AMap = window.AMap
      this.marker = new AMap.Marker();

      let map = new AMap.Map("js-container", {
        resizeEnable: true,
        zoom: 18
      });

      // 坐标与地址转换插件
      AMap.service('AMap.Geocoder', () => {
        let geocoder = new AMap.Geocoder({});
        geocoder.getLocation('深圳市龙岗区贝尔路二号神舟承运大厦', (status, result) => {
          if (status === 'complete'&&result.geocodes.length) {
            let lnglat = result.geocodes[0].location
            console.log(lnglat)
            console.log(status, result)
            this.marker.setPosition(lnglat);
            map.add(this.marker);
            map.setFitView(this.marker);

            // 设置label标签
            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
            this.marker.setLabel({
              offset: new AMap.Pixel(-40, 30),  //设置文本标注偏移量
              content: "<div class='info'>蓝湖科技（深圳）有限公司</div>", //设置文本标注内容
              direction: 'left' //设置文本标注方位
            });
          }else{
            console.log('根据地址查询位置失败');
          }
        });
      })
    }
  },

  async mounted () {
    // 已载入高德地图API，则直接初始化地图
    if (window.AMap) {
      this.initMap()
    // 未载入高德地图API，则先载入API再初始化
    } else {
      await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
      await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
      this.initMap()
    }
  }
}
</script>

<style lang="css">

.m-map{ min-width: 500px; min-height: 300px; position: relative; }
.m-map .map{ width: 100%; height: 100%; }
.m-map .search{ position: absolute; top: 10px; left: 10px; width: 285px; z-index: 1; }
.m-map .search input{ width: 180px; border: 1px solid #ccc; line-height: 20px; padding: 5px; outline: none; }
.m-map .search button{ line-height: 26px; background: #fff; border: 1px solid #ccc; width: 50px; text-align: center; }
.m-map .result{ max-height: 300px; overflow: auto; margin-top: 10px; }


.amap-marker-label{
  border: 0;
  font-size: 14px;
  background-color: transparent;
}

/*.info{*/
/*  position: relative;*/
/*  top: 20px;*/
/*  right: 70px;*/
/*}*/

</style>
